<template>
    <div id="lineChart"></div>
</template>

<script setup>
import { onMounted, reactive, watch, defineProps, getCurrentInstance } from 'vue';
/*
    折现图数据类型： { title: 标题, xData: x轴数据, yData: y轴数据 }
*/
// --父组件数据获取并监听--
let props = defineProps(['lineData', 'resizeOrNot'])
watch(() => props.lineData, () => {
    echartsInit()
}, { deep: true })
watch(() => props.resizeOrNot, () => {
    myChart.resize()
}, { deep: true })
let myChart = reactive({}) // echarts实例载体
const { proxy } = getCurrentInstance()
// 初始化echarts图表
let echartsInit = () => {
    myChart = proxy.$echarts.init(document.getElementById('lineChart'))
    let option = {
        title: {
            text: props.lineData.title,
            top: '10',
            right: 'center',
            textStyle: {
                color: '#fff',
                fontSize: 25,
                fontWeight: 800,
                fontFamily: 'Microsoft YaHei',
                textBorderColor: '#191919',
                textBorderWidth: 5,
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: false, // 两边空隙
            data: props.lineData.xData,
            axisLabel: {
                rotate: 30, // 倾斜角度
                align: 'right', // 文字水平对齐方式
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 元',
            }
        },
        tooltip: { // 提示框
            trigger: 'axis', // 触发器，在坐标轴对上触发显示
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#191919'
                },
            },
            formatter: '<h4>{b}</h4><span class="tooltipPoint"></span>总营收：{c} 元',
            backgroundColor: '#191919bb',
            borderColor: '#191919aa',
            borderWidth: 2,
            textStyle: {
                color: '#fff'
            },
        },
        itemStyle: { // 折线和小点颜色
            color: '#191919',
            lineStyle: {
                width: 4,
            }
        },
        series: [
            {
                data: props.lineData.yData,
                type: 'line',
                smooth: true, // 开启平滑画线
                areaStyle: { // 阴影区域样式
                    // 渐变颜色定义
                    color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(0, 0, 0, 0.7)",
                        },
                        {
                            offset: 1,
                            color: "rgba(0, 0, 0, 0)",
                        },
                    ]),
                },
                itemStyle: { // 折线和小点颜色
                    color: '#191919',
                    lineStyle: {
                        width: 4,
                    }
                },
            }
        ]
    };
    myChart.clear() // 清空实例，但似乎无效(无法消除警告)
    myChart.setOption(option)
}
onMounted(() => {
    echartsInit() // 初始化echarts
})
</script>

<style lang="scss" scoped>
#lineChart {
    height: 100%;
    width: 100%;
    color: #191919bb;
}

::v-deep .tooltipPoint {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #191919;
    display: inline-block;
    margin-right: 1rem;
}
</style>